<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="{{ url_for('static', filename = 'css/bootstrap.min.css') }}" rel="stylesheet">
        <style>
            /* 自定义简约样式 */
            body {
                padding-top: 20px;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            }
            .container {
                max-width: 100%;
            }
            .search-form {
                margin-bottom: 20px;
            }
            .table {
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 10px rgba(0,0,0,0.05);
                border: none;
            }
            .table thead {
                background-color: #f8f9fa;
                border-bottom: 1px solid #e9ecef;
            }
            .table th, .table td {
                padding: 8px 12px;
                vertical-align: middle;
            }
            .table tbody tr {
                border-bottom: 1px solid #e9ecef;
            }
            .table tbody tr:last-child {
                border-bottom: none;
            }
            .btn {
                border-radius: 4px;
                padding: 6px 12px;
                font-size: 14px;
                font-weight: 500;
                transition: all 0.2s ease;
            }
            .btn-primary {
                background-color: #4a6fa5;
                border-color: #4a6fa5;
            }
            .btn-primary:hover {
                background-color: #3d5c8a;
                border-color: #3d5c8a;
            }
            .btn-danger {
                background-color: #d9534f;
                border-color: #d9534f;
            }
            .btn-danger:hover {
                background-color: #c9302c;
                border-color: #ac2925;
            }
            .btn-warning {
                background-color: #f0ad4e;
                border-color: #f0ad4e;
            }
            .btn-warning:hover {
                background-color: #ec971f;
                border-color: #d58512;
            }
            .action-buttons {
                display: flex;
                gap: 8px;
            }
            .alert {
                margin-top: 20px;
                padding: 12px 15px;
                border-radius: 4px;
                font-size: 14px;
            }
        </style>
        <title>首页</title>
    </head>
    <body>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <!-- 搜索表单 - 优化布局和样式 -->
                    <div class="search-form">
                        <form action="/search" method="get" class="d-flex">
                            <input
                                type="text"
                                class="form-control me-2"
                                placeholder="输入关键词搜索"
                                aria-label="搜索"
                                aria-describedby="search-button"
                                name="keyword"
                                {% if keyword%} value="{{keyword}}" {% endif %}
                            >
                            <button
                                class="btn btn-primary"
                                type="submit"
                                id="search-button"
                            >
                                搜索
                            </button>
                            <a
                                class="btn btn-warning ms-2"
                                href="/toAddPage"
                            >
                                新增
                            </a>
                        </form>
                    </div>

                    <!-- 数据表格 - 优化样式和布局 -->
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">姓名</th>
                                    <th scope="col">性别</th>
                                    <th scope="col">年龄</th>
                                    <th scope="col">联系方式</th>
                                    <th scope="col">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in items %}
                                <tr>
                                    {% for col in cols %}
                                    <td>{{ item[col] }}</td>
                                    {% endfor %}
                                    <!-- 操作列 - 优化按钮布局 -->
                                    <td class="action-buttons">
                                        <a
                                            class="btn btn-primary"
                                            href="{{url_for('toEditPage',id=item['id'])}}"
                                        >
                                            编辑
                                        </a>
                                        <a
                                            class="btn btn-danger"
                                            href="{{url_for('remove',id=item['id'])}}"
                                            onclick="return confirm('⚠️确定删除吗');"
                                        >
                                            删除
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>

                        <!-- 提示信息 - 优化样式 -->
                        {% if success %}
                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                            {{ success }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="关闭"></button>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <script src="{{url_for('static',filename='js/jquery.min.js')}}"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>